<template>
  <div class="wrap">
    <van-row style="height: 100%;">
      <template
        v-for="item in reverse ? [...compassBase].reverse() : [...compassBase]"
      >
        <van-col
          span="8"
          v-if="item.code === 5"
          :style="{ ...calcStyle }"
          style="color: #1890ff;"
        >
          {{ baseInfo.name }}{{ baseInfo.code }}
        </van-col>
        <van-col
          span="8"
          v-else-if="inductionCalc(base, item.code) === '辅'"
          :style="{
            ...colorCalc(inductionCalc(base, item.code)),
            ...calcStyle
          }"
          style="font-weight: bold;"
          >{{ baseInfo.icon }}</van-col
        >
        <van-col
          span="8"
          v-else
          :style="{
            ...colorCalc(inductionCalc(base, item.code)),
            ...calcStyle
          }"
          >{{ inductionCalc(base, item.code) }}</van-col
        >
      </template>
    </van-row>
    <slot />
  </div>
</template>

<script>
import compassBase from "./compassBase.js";
export default {
  props: ["base", "reverse", "height", "width"],
  data() {
    return {
      // compassBase: [4, 9, 2, 3, 5, 7, 8, 1, 6],
      compassBase: compassBase
    };
  },

  computed: {
    calcStyle() {
      return {
        height: this.height / 3 + "px",
        fontSize: Math.min(this.width, this.height) / 3 / 2 + "px"
      };
    },
    baseInfo() {
      return this.compassBase.find(item => item.code == this.base) || {};
    }
  },

  methods: {
    colorCalc(str) {
      if (/天|延|生/.test(str)) {
        return {
          color: "#52c41a",
          fontWeight: "bold"
        };
      }
      if (/五|六|绝|祸/.test(str)) {
        return {
          color: "#ff4d4f"
        };
      }
      return {
        color: "#1890ff"
      };
    },
    inductionCalc(a, b) {
      var east = {
        1: 1,
        3: 2,
        4: 3,
        9: 4
      };
      var west = {
        2: 1,
        7: 2,
        8: 3,
        6: 4
      };
      //判断是否同宫位
      if (east[a] && east[b]) {
        var calc = east[a] ? east : west;
        var cha = calc[a] > calc[b] ? calc[a] - calc[b] : calc[b] - calc[a];
        if (cha == 0) {
          return "辅";
        } else if (cha == 2) {
          return "生";
        } else if (
          cha == 1 &&
          (calc[a] == 1 || calc[b] == 1 || calc[a] == 4 || calc[b] == 4)
        ) {
          return "天";
        } else {
          return "延";
        }
      } else if (west[a] && west[b]) {
        var calc = east[a] ? east : west;
        var cha = calc[a] > calc[b] ? calc[a] - calc[b] : calc[b] - calc[a];
        if (cha == 0) {
          return "辅";
        } else if (cha == 2) {
          return "生";
        } else if (
          cha == 1 &&
          (calc[a] == 1 || calc[b] == 1 || calc[a] == 4 || calc[b] == 4)
        ) {
          return "天";
        } else {
          return "延";
        }
      } else {
        var calc1; //与a绑定
        var calc2; //与b绑定
        if (east[a]) {
          calc1 = east;
          calc2 = west;
        } else {
          calc1 = west;
          calc2 = east;
        }
        //判断绝命;
        var cha =
          calc1[a] > calc2[b] ? calc1[a] - calc2[b] : calc2[b] - calc1[a];
        if (cha == 0) {
          return "绝";
        } else if (cha == 2) {
          return "五";
        } else if (
          cha == 1 &&
          (calc1[a] == 1 || calc2[b] == 1 || calc1[a] == 4 || calc2[b] == 4)
        ) {
          return "祸";
        } else {
          return "六";
        }
      }
    }
  }
};
</script>
<style>
.wrap {
  width: 100%;
  position: relative;
}
.wrap .van-col {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 1px solid #ccc;
  height: 11vw;
  font-size: 33px;
}
.wrap .van-row {
  width: 100%;
}
</style>
